<template>
    <div>
      <button @click="toggleTheme">
          切换到{{ theme === 'light' ? '暗色' : '亮色' }}模式
      </button>
  
      <button color="primary">Button</button>
      <!-- <NuxtLayout>
        <NuxtPage />
      </NuxtLayout> -->
    </div>
  </template>
  
  <script setup>
  const theme = ref('light')
  onMounted(() => {
    // 读取本地存储的主题
    theme.value = localStorage.getItem('theme') || 'light'
    document.documentElement.setAttribute('data-theme', theme.value)
  })
  
  function toggleTheme() {
    theme.value = theme.value === 'light' ? 'dark' : 'light'
    document.documentElement.setAttribute('data-theme', theme.value)
    localStorage.setItem('theme', theme.value)
  }
  </script>
  
  <style scoped>
    
  </style>